<template>
  <el-container class="layout">
    <el-header>
      <div class="layout-logo">
        <img src="http://weldon.net.cn/back/img/logo.5b13fac4.png" alt="" />
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="asideWidth">
        <div class="hamburger" @click="putAside">|||</div>
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#363d40"
          text-color="#fff"
          active-text-color="rgb(64, 159, 255)"
          :collapse="isCollapse"
          :collapse-transition="false"
          :unique-opened="true"
          router
          :default-active="this.$route.path"
        >
          <!-- 首页 -->
          <el-menu-item index="/welcome">
            <i class="el-icon-s-custom"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- 用户管理 -->
          <el-submenu
            v-for="item in menuList"
            :key="item.id"
            :index="item.path"
          >
            <template slot="title">
              <i :class="mapIcon[`${item.order}`]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="element in item.children"
                :key="element.id"
                :index="'/' + element.path"
                ><i class="el-icon-menu"></i
                >{{ element.authName }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getMenuInfo } from '@/api/menu.js'

export default {
  data() {
    return {
      asideWidth: '200px',
      isCollapse: false,
      menuList: [],
      mapIcon: {
        1: 'el-icon-user-solid',
        2: 'el-icon-s-platform',
        3: 'el-icon-s-goods',
        4: 'el-icon-s-order',
        5: 'el-icon-s-marketing',
      },
    }
  },
  methods: {
    putAside() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
    },
    async getMenu() {
      const res = await getMenuInfo()
      this.menuList = res.data
    },
    // 退出登录
    async logout() {
      await this.$store.dispatch('user/removeToken')
      this.$router.push('/login')
    },
  },
  created() {
    this.getMenu()
  },
  computed: {},
}
</script>

<style lang="less" scoped>
.layout {
  min-height: 100vh;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #363d40;
    .layout-logo {
      height: 50px;
      img {
        height: 100%;
      }
    }
  }
  .el-container {
    .el-aside {
      overflow: hidden;
      background-color: #363d40;
      transition: 0.5s;
      .hamburger {
        // width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        letter-spacing: 2px;
        font-size: 14px;
        background-color: #4a5064;
        color: #fff;
      }
      /deep/ .el-menu {
        border: none;
        /deep/.el-menu-item {
          min-width: 0px;
        }
      }
    }
    .el-main {
      flex: 1;
      background-color: #e9edf1;
    }
  }
}
</style>
